/* 多图页面html
 <div class="fs10 padl5 padr5 flr">
    <mu-form-item label="图集" :rules="[rules.notNull]" prop="pic">
        <div class="ofh">
            <div class="flex-r flex-nowrap">
                <mu-paper class="picCommonSize pos-r mar3" :z-depth="1"  v-for="tile, index in pics">
                    <img class="picCommonSize" :src="tile">
                    <div class="pos-a w100 r0 l0 b-3 flrc op6">
                        <mu-button fab small color="black" @click="move(index,-1)">
                            <mu-icon  value="arrow_back"></mu-icon>
                        </mu-button>
                        <mu-button fab small color="black" @click="move(index,1)">
                            <mu-icon  value="arrow_forward"></mu-icon>
                        </mu-button>
                        <mu-button fab small color="black" @click="del(index)">
                            <mu-icon  value="close"></mu-icon>
                        </mu-button>
                    </div>
                </mu-paper>
            </div>

            <div class="">
                <mu-button color="success" @click="selectPic()">选择图片</mu-button>
            </div>
        </div>
    </mu-form-item>
</div>

多图页面js
var PicUpUserHead = new PicUp()
selectPic:function () {
    var _this = this;
    PicUpUserHead.select(9).setCbFunc(function (pics) {
        _this.pics = PicUpUserHead.getViewData(pics)
    })
},
del:function (index) {
    let pics = PicUpUserHead.removePic(index)
    this.pics = PicUpUserHead.getViewData(pics)
},
move:function (index,num) {
    let pics = PicUpUserHead.picMove(index,num)
    this.pics = PicUpUserHead.getViewData(pics)
},
*/


/*头像
网页代码
<div class="fs10 padl5 padr5 flrc padt10">
    <mu-form-item label="" :rules="[rules.notNull]" prop="pic">
        <div class="">
            <div class="flrc flex1 padl5">
                <mu-paper class="ofh wh30-30 marr10" :z-depth="1">
                    <img class="wh30-30" :src="form.pic" v-if="form.pic">
                </mu-paper>
                <mu-paper :circle="true" class="ofh wh30-30" :z-depth="1">
                    <img class="wh30-30" :src="form.pic" v-if="form.pic">
                </mu-paper>
            </div>

            <div class="mart5">
                <mu-button color="success" @click="selectEditPic()" full-width>
                    选择头像
                </mu-button>
            </div>
        </div>
    </mu-form-item>
    <div class="pos-f b0 l0 w100 bc11 c13 flrc fs10" style="height: 11vw" v-if="toolsShow">
        <div class="flex1 tac"><mu-button @click="save()">保存</mu-button></div>
        <div class="flex1 tac"><mu-button @click="reset()">重置</mu-button></div>
        <div class="flex1 tac"><mu-button @click="close()">取消</mu-button></div>
    </div>
</div>

js代码
selectEditPic:function () {
    var _this = this;
    PicUpUserHead.selectEdit(()=>{_this.toolsShow = true})
        .setCbFunc(function (pics) {
        _this.form.pic = pics[0]
        _this.form.picV = PicUpUserHead.getViewData(pics)[0]
    })
}
,save:function () {
    PicUpUserHead.editSave()
    this.toolsShow = false
}
,reset:PicUpUserHead.editReset
,close:function () {
    PicUpUserHead.editClose()
    this.toolsShow = false
}
* **/



var PicUp = new Class.create();
var UIAlbumBrowser;
var imageOptim;
var FNImageClip;
PicUp.prototype = {
    selectedPath:[],//选择出来的照片原地址
    preparedPath:[],//经过处理过后的临时数组
    uploadedPath:[],//上传后拿到的服务器地址
    quality:0.3,
    maxWidth:2000,
    numTotal:0,
    numUpload:0,
    uploading:false,
    cbFunc:function(){},
    initialize:function(){
        // UIAlbumBrowser = api.require('UIAlbumBrowser')
        // imageOptim = api.require('imageOptim');
        // FNImageClip = api.require('FNImageClip');
    }
    ,select:function (maxNum) {
        if(maxNum === undefined) maxNum = 9;
        let _this = this
        UIAlbumBrowser.open({
            max: maxNum,
            image: 'image',
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'top_right',
                    size: 30
                },
                nav: {
                    bg: 'rgba(0,0,0,0.6)',
                    titleColor: '#fff',
                    titleSize: 18,
                    cancelColor: '#fff',
                    cancelSize: 16,
                    finishColor: '#fff',
                    finishSize: 16
                }
            },
            rotation: false
        }, function(ret) {
            if (ret.list !== undefined) {
                let totalPic = ret.list.length;
                if (totalPic === 0){
                    showToast('请选择图片')
                    return false
                }
                ret.list.map(function (data) {
                    _this.selectedPath.push(data.path)
                })
                _this.autoUpload();
            }
        });
        return this;
    }
    ,selectEdit:function (func) {
        UIAlbumBrowser.open({
            max: 1,
            image: 'image',
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'top_right',
                    size: 30
                },
                nav: {
                    bg: 'rgba(0,0,0,0.6)',
                    titleColor: '#fff',
                    titleSize: 18,
                    cancelColor: '#fff',
                    cancelSize: 16,
                    finishColor: '#fff',
                    finishSize: 16
                }
            },
            rotation: false
        }, function(ret) {
            if (ret.list !== undefined) {
                let totalPic = ret.list.length;
                if (totalPic === 0){
                    showToast('请选择图片')
                    return false
                }
                let path = ret.list[0].path
                FNImageClip.open({
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight - api.winWidth/10
                    },
                    srcPath: path,
                    style: {
                        mask: 'rgba(0,0,0,0.5)',
                        clip: {
                            w: api.winWidth/2,
                            h: api.winWidth/2,
                            x: api.winWidth/4,
                            y: (api.winHeight - api.winWidth/10 - api.winWidth/2)/2,
                            borderColor: '#FFF',
                            borderWidth: 2,
                            appearance: 'rectangle'
                        }
                    },
                    fixedOn: api.frameName,
                    mode:'image'
                }, function(ret, err) {
                    if (ret) {
                        func()
                        // alert(JSON.stringify(ret));
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            }
        });
        return this;
    }
    ,upload:function (picPath) {
        let _this = this;
        _this.uploadedPath = []
        if (toOSS === 1) {
            uploadOnePicToOss(picPath,function (path) {
                _this.uploadedPath.push(path)
                _this.cbFunc(_this.uploadedPath)
                _this.numUpload ++
                if (_this.numUpload === _this.numTotal) {
                    _this.uploading = false
                }else {
                    _this.uploading = true
                }
            });
        }else {
            apiUpload( "/MyWebPicUpload" , picPath ,function (res) {
                _this.uploadedPath.push(res.d)
                _this.cbFunc(_this.uploadedPath)
                _this.numUpload ++
                if (_this.numUpload === _this.numTotal) {
                    _this.uploading = false
                }else {
                    _this.uploading = true
                }
            })
        }
    }
    ,compress:function (picPath) {
        let _this = this
        let param = {};
        param["imgPath"] = picPath;
        param["quality"] = _this.quality;
        param["width"] = _this.maxWidth;
        imageOptim.compress(param, function (ret, err) {
            if (ret) {
                // _this.preparedPath.push(ret.imgPath)
                _this.upload(ret.imgPath)
            } else {
                api.alert({
                    title: '提示',
                    msg: err.message,
                }, function (ret, err) {});
            }
        });
    }
    ,autoUpload:function () {
        let _this = this
        let selectedPicNum = _this.selectedPath.length
        _this.numTotal = selectedPicNum;
        _this.numUpload = 0;
        let int = setInterval(function () {
            selectedPicNum = _this.selectedPath.length;
            // showToast(selectedPicNum + "个文件待上传")
            //检查并压缩图片压缩后上传，延迟根据服务器能力修改
            if (selectedPicNum > 0) {
                _this.compress(_this.selectedPath.shift())
            }else {
                clearInterval(int)

            }
            // this.selectedPath.shift()
        },100)
    }
    ,setCbFunc:function (cbFunc) {
        this.cbFunc = cbFunc
    }
    ,removePic:function (picIndex,pics){
        let update = false;
        if (pics === undefined){
            pics = this.uploadedPath
            update= true
        }
        var newData = []
        // var newViewData = []
        pics.map(function (data,index) {
            console.log(index);
            console.log(picIndex);
            if (picIndex === index) {return;}
            newData.push(data)
            // newViewData.push(baseUrl + data)
        })
        if (update) {
            this.uploadedPath = newData
        }
        return newData
    }
    ,getViewData:function (pics) {
        if (pics === undefined){
            pics = this.uploadedPath
        }
        var newData = []
        pics.map(function (data) {
            if (toOSS === 1) {
                newData.push(ossUrl + data);
            }else {
                newData.push(baseUrl + data);
            }
        })
        return newData
    }
    ,picMove(index,num,pics){
        let update = false;
        if (pics === undefined){
            pics = this.uploadedPath
            update= true
        }
        let curPic =  pics[index];
        let targetPic;
        let targetIndex;
        targetIndex = index + num;
        if (targetIndex >= pics.length -1) {targetIndex = pics.length -1}
        if (targetIndex <= 0) {targetIndex = 0}
        targetPic = pics[targetIndex];
        pics[index] = targetPic;
        pics[targetIndex] = curPic;
        if (update) {
            this.uploadedPath = pics
        }
        return pics;
    }
    ,editSave:function () {
        var _this = this
        FNImageClip.save({
            destPath: 'fs://imageClip/cur.png',
            copyToAlbum: false,
            quality: 1
        }, function(ret, err) {
            if (ret) {
                _this.upload(ret.destPath)
                FNImageClip.close();
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
    ,editClose:function () {
        FNImageClip.close();
    }
    ,editReset:function () {
        FNImageClip.reset();
    }
}